import React from 'react';

// image
import echartIconMedia from '@assets/images/detail-iqiyi.png';
import echartIconTV from '@assets/images/detail-weibo.png';
import echartIconRadio from '@assets/images/detail-tencent.png';

import EchartNestPie from '@components/EchartType/EchartNestPie';
import EchartPie from '@components/EchartType/EchartPie';
export default class EchartPies extends React.Component {
  constructor(props) {
    super(props);
    this.dataTypes = [
      { name: '新媒体', icon: `image://${echartIconMedia}`, textStyle: { color: '#fff' } },
      { name: '电视', icon: `image://${echartIconTV}`, textStyle: { color: '#fff' } },
      { name: '广播', icon: `image://${echartIconRadio}`, textStyle: { color: '#fff' } }];
  }

  render() {
   let allXAxisData = [
     {"value":37.98,"name":"新媒体","label":{"show":true}},
     {"value":148.05,"name":"电视","label":{"show":true}},
     {"value":2.3,"name":"广播","label":{"show":true}}];
    return (
      <div className="home-page">
        <div style={{height:'500px',background: 'rgba(0, 0, 0, .6)'}}>
          <EchartPie
            yAxisData={this.dataTypes}
            // yAxisData={this.dataTypes}
            title='系统监测数据'
            xAxisData={allXAxisData}
            seriesColor={['#08B372', '#fa8c41',  '#4280fe']}
            showTitle={false}
            showLegend={true}
            unit="h"
            showPieName={true}
          />
        </div>
        <div style={{height:'300px'}}>
          <EchartNestPie />
        </div>
      </div>
    );
  }
}